<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import type { Ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getDetailFn } from '@/api/home'
import { showImagePreview, showToast } from 'vant';
import { addCartFn, getCartListFn } from '@/api/cart';
import { useUserInfoStore } from '@/stores/user';

const userinfo = useUserInfoStore()

const route = useRoute()

const proid: Ref<string, string> = ref('')
interface iDetail {
    banners: string[];
    proid: string;
    category: string;
    brand: string;
    proname: string;
    originprice: number;
    sales: number;
    stock: number;
    desc: string;
    issale: number;
    isrecommend: number;
    discount: number;
    isseckill: number;
    img1: string;
    img2: string;
    img3: string;
    img4: string;
}
const detail: Ref<iDetail> = ref({
    banners: [],
    proid: '',
    category: '',
    brand: '',
    proname: '',
    originprice: 0,
    sales: 0,
    stock: 0,
    desc: '',
    issale: 0,
    isrecommend: 0,
    discount: 0,
    isseckill: 0,
    img1: '',
    img2: '',
    img3: '',
    img4: ''
})

const count: Ref<number, number> = ref(0)

function getCartList() {
    // 获取购物车数量
    getCartListFn(userinfo.userinfo.userid).then(res => {
        if (res.data.code == 200) {
            count.value = res.data.data.length
        }
    })
}

onMounted(() => {
    // console.log(route);
    proid.value = String(route.query.proid)
    getDetailFn(String(route.query.proid)).then(res => {
        res.data.data.banners = res.data.data.banners[0].split(',')
        setTimeout(() => {
            detail.value = res.data.data
        }, 500)
    })

    getCartList()

})

// ------------- 图片预览功能
const currentIndex: Ref<number> = ref(0)
// 点击轮播图
function showImage() {
    // 打开图片预览
    showImagePreview({
        images: detail.value.banners,
        startPosition: currentIndex.value,
        onChange(index: number) {
            currentIndex.value = index
        }
    });
}
// 切换轮播图
function changeImage(index: number) {
    // console.log(index);
    setTimeout(() => {
        currentIndex.value = index
    }, 200);
}

// --------------- 视频播放
const show: Ref<boolean> = ref(false)
const videoRef = ref()

watch(show, (currentVal) => {
    // console.log('状态变化了' + currentVal);

    if (currentVal) {
        // 继续播放
        if (videoRef.value) {
            videoRef.value.play()
        }

    } else {
        // 暂停播放
        videoRef.value.pause()
    }

})
// ----------------- 客服
function showMQ() {
    window._MEIQIA('metadata', {
        address: '杭州', // 地址
        age: '18', // 年龄
        comment: '我要赚钱', // 备注
        email: '1@qq.com', // 邮箱
        gender: '男', // 性别
        name: '老吴', // 名字
        qq: '1234568', // QQ
        tel: '123456789', // 电话
        weibo: '1234567890', // 微博
        weixin: '1234567890', // 微信
        contact: '1234567890', // 联系人
    })


    // 打开聊天窗口
    window._MEIQIA('showPanel');
}

// --------------- addCartClick 加入购物车
function addCartClick() {
    addCartFn({
        userid: userinfo.userinfo.userid,
        proid: String(route.query.proid),
        num: 1
    }).then(res => {
        // console.log(res);
        showToast(res.data.message)
        getCartList()
    })
}
</script>
<template>
    <main class="box">
        <header class="header">
            <van-icon @click="$router.back()" class="back" name="arrow-left" />
            <span>头部-详情</span>
        </header>

        <div class="content" v-if="detail.proid != ''">
            <div class="swipe-box">
                <van-swipe @change="changeImage" @click="showImage" :initial-swipe="currentIndex" class="my-swipe"
                    :autoplay="3000" indicator-color="#f66">
                    <van-swipe-item :key="item" v-for="item in detail.banners">
                        <img :src="item" alt="">
                    </van-swipe-item>

                    <template #indicator="{ active, total }">
                        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
                    </template>
                </van-swipe>

                <!-- 视频播放按钮 -->
                <div @click="show = true" class="video-btn">
                    <van-icon size="20" name="play" />
                </div>
            </div>

            <!-- 其余内容的显示 -->
            <div class="detail-content">
                <h2>{{ detail.proname }}</h2>
                <p class="mar">
                    <span style="color: #f66;">活动：￥ {{ (detail.originprice * detail.discount * 0.1).toFixed(2) }}
                    </span>
                    &#X3000;&#X3000;
                    <del> 原价：￥{{ detail.originprice }} </del>
                </p>
                <p> 品牌： {{ detail.brand }} </p>
                <p class="mar"> 分类： {{ detail.category }} </p>
                <p class="desc"> 简介： {{ detail.desc }} </p>
            </div>

        </div>
        <div class="content" v-else>
            <van-skeleton title avatar :row="3" />
            <br>
            <van-skeleton title avatar :row="3" />
            <br>
            <van-skeleton title avatar :row="3" />
            <br>
            <van-skeleton title avatar :row="3" />
            <br>
            <van-skeleton title avatar :row="3" />
        </div>


        <!-- 显示视频的块 -->
        <van-overlay :show="show" @click="show = false">
            <div class="wrapper" @click.stop>
                <video ref="videoRef" autoplay controls
                    src="https://vod.300hu.com/24/4c1f7a6atransbjngwcloud1oss/1e244372931224622556327937/1098_c086e8192_f.mp4"></video>
            </div>
        </van-overlay>



        <van-action-bar>
            <van-action-bar-icon @click="showMQ" icon="chat-o" text="客服" dot />
            <van-action-bar-icon @click="$router.replace('/cart')" icon="cart-o" text="购物车" :badge="count" />
            <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
            <van-action-bar-button @click="addCartClick" type="warning" text="加入购物车" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>



    </main>
</template>
<style scoped lang="scss">
.back {
    float: left;
    font-size: .2rem;
    line-height: .44rem;
    padding-left: 10px;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 4rem;
    line-height: 4rem;
    text-align: center;


    img {
        width: 100%;
        height: 100%;

    }
}

.content {
    background-color: #f5f5f5;
}

.custom-indicator {
    position: absolute;
    right: 0px;
    bottom: 10px;
    padding: 8px 15px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.3);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    color: white;
}

.swipe-box {
    position: relative;


    .video-btn {
        background-color: white;
        width: .6rem;
        height: 0.3rem;
        border: 1px solid #f66;
        position: absolute;
        left: calc(50% - .3rem);
        bottom: 5px;

        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: .15rem;
        color: #f66;
    }
}

.van-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
}

.detail-content {
    padding: 10px;

    .mar {
        margin: 10px 0;
    }

    .desc {
        // font-weight: 900;
        color: gray;
        line-height: 26px;
    }

    padding-bottom: 600px;
}
</style>
